<template>
  <div id="pie-chart-monitor"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  const chartDom = document.getElementById('pie-chart-monitor')!;
  const myChart = echarts.init(chartDom);

  // 创建渐变色函数
  const createGradient = (startColor: string, endColor: string) => {
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: startColor },
      { offset: 1, color: endColor }
    ]);
  };

  // 定义数据
  const data = [
    { value: 1048, name: '湿地公园监测点' },
    { value: 735, name: '森林保护区监测点' },
    { value: 580, name: '湖泊观测站' },
    { value: 484, name: '山区监测站' },
    { value: 100, name: '城市生态园' },
    { value: 899, name: '鸟类保护区东站' },
    { value: 30, name: '湿地西观测点' },
    { value: 450, name: '森林北监测点' },
  ];

  // 计算总数
  const total = data.reduce((sum, item) => sum + item.value, 0);


  // 颜色方案
  const colors = [
    createGradient('#36D1DC', '#5B86E5'), // 蓝绿渐变
    createGradient('#FF9A9E', '#FAD0C4'), // 粉红渐变
    createGradient('#A1C4FD', '#C2E9FB'), // 浅蓝渐变
    createGradient('#FFD3B6', '#FFAAA5'), // 橙红渐变
    createGradient('#D4FC79', '#96E6A1'), // 黄绿渐变
    createGradient('#F6D365', '#FDA085'), // 橙黄渐变
    createGradient('#E0C3FC', '#8EC5FC'), // 紫蓝渐变
    createGradient('#A8FF78', '#78FFD6')  // 青绿渐变
  ];

  const option = {
    title: {
      text: '监测点识别鸟类数量',
      left: 'center',
      top: 15,
      textStyle: {
        color: '#2c3e50',
        fontSize: 22,
        fontWeight: 'bold',
        fontFamily: 'Arial, sans-serif'
      }
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      padding: [10, 15],
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      formatter: (params: any) => {
        const { name, value, percent } = params;
        const color = colors[params.dataIndex];
        return `
          <div style="font-weight: bold; margin-bottom: 5px;">${name}</div>
          <div style="display: flex; align-items: center; margin: 5px 0;">
            <div style="width: 12px; height: 12px; background: ${color.colorStops[0].color}; border-radius: 50%; margin-right: 8px;"></div>
            <div>数量: <b>${value}</b></div>
          </div>
          <div style="display: flex; align-items: center; margin: 5px 0;">
            <div style="width: 12px; height: 12px; background: ${color.colorStops[1].color}; border-radius: 50%; margin-right: 8px;"></div>
            <div>占比: <b>${percent}%</b></div>
          </div>
        `;
      }
    },
    legend: {
      type: 'plain',
      orient: 'horizontal',
      right: 15,
      top: 'bottom',
      itemWidth: 14,
      itemHeight: 14,
      textStyle: {
        color: '#666',
        fontSize: 14
      }
    },
    series: [
      {
        name: '鸟类数量',
        type: 'pie',
        radius: ['30%', '65%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        padAngle: 3,
        itemStyle: {
          borderRadius: 10,
          borderWidth: 2,
          borderColor: '#fff'
        },
        label: {
          show: false,
          position: 'outside',
          formatter: '{b}: {d}%',
          fontSize: 12,
          fontWeight: 'bold',
          color: '#333',
          textBorderColor: '#fff',
          textBorderWidth: 2
        },
        labelLine: {
          length: 15,
          length2: 20,
          smooth: true,
          lineStyle: {
            width: 1.5,
            color: '#ccc'
          }
        },
        emphasis: {
          scale: true,
          scaleSize: 8,
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.3)'
          }
        },
        data: data.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colors[index]
          }
        })),
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDuration: 1500,
        animationDelay: (idx: number) => idx * 200
      }
    ],
    backgroundColor: '#fff',
    textStyle: {
      fontFamily: 'Arial, sans-serif'
    }
  };

  myChart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', () => myChart.resize());
});
</script>

<style scoped>
#pie-chart-monitor {
  height: 500px;
  width: 350px;
  margin: 20px auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
}

#pie-chart-monitor:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  #pie-chart-monitor {
    height: 450px;
    max-width: 95%;
  }
}

@media (max-width: 480px) {
  #pie-chart-monitor {
    height: 400px;
    border-radius: 8px;
  }
}
</style>